<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { CreateElement } from 'vue'
import { formatCurrency } from '@/utils'

@Component({
  name: 'RenderMoney'
})
export default class extends Vue {
  // ratio
  @Prop({ type: Number, required: false, default: 0.01 })
  private ratio!: number
  // currency symbol
  @Prop({ type: String, required: false, default: '￥' })
  private currencySymbol!: string

  render (h: CreateElement) {
    return h('el-table-column', {
      props: this.$attrs,
      scopedSlots: {
        default: ({ row }) => {
          const amount = parseFloat(row[this.$attrs.prop])
          const isValid = !isNaN(amount)
          return isValid
            ? formatCurrency(amount, this.ratio, this.currencySymbol)
            : null
        }
      }
    })
  }
}
</script>
